<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Test</title>
<style>
:root {
    --wwidth: 50vw;
    --hheight: calc(var(--wwidth) / 2);
    --itemWidth:150px;
    --itenWidthHalf:75px;
}
body{
    height: 100vh;
    overflow: hidden;
    background:gainsboro;
}
#circle-area
{   position: absolute;
    margin: 0 auto;
  height: var(--wwidth);
  width: var(--wwidth);
  border: 2px dashed black;
  border-radius:50%;
  transition: transform 1s;
  bottom: calc(-100px - var(--hheight));
  left: var(--hheight);
}
#circle-area2
{   position: absolute;
    margin: 0 auto;
    height: calc(var(--wwidth) - 40px);
  width:  calc(var(--wwidth) - 40px);
  /* border: 2px dashed rgb(219, 9, 9); */
  border-radius:50%;
  background: radial-gradient(circle at center, #ff0000, transparent, #ff0000);
  /* background-image: linear-gradient(red,transparent); */
  transition: transform 1s;
  bottom: calc(-80px - var(--hheight));
  left: calc(var(--hheight) + 20px);
}
#circle-area3
{   position: absolute;
    margin: 0 auto;
    height: calc(var(--wwidth) - 200px);
  width:  calc(var(--wwidth) - 200px);
  /* border: 2px dashed rgb(219, 9, 9); */
  border-radius:50%;
  background:royalblue;
  /* background-image: linear-gradient(red,transparent); */
  transition: transform 1s;
  bottom: calc(0px - var(--hheight));
  left: calc(var(--hheight) + 100px);
}
#div1
{  
  transform: rotate(0deg);
}
#div1 .content {
    transform: rotate(-0deg);
  }
  
#div2
{  
  transform: rotate(25deg);
}
#div2 .content {
    transform: rotate(-25deg);
  }
  
#div3
{  
  transform: rotate(50deg);
}
#div3 .content {
    transform: rotate(-50deg);
  }
  
#div4
{  
  transform: rotate(75deg);
}
#div4 .content {
    transform: rotate(-75deg);
  }
  
#div5
{  
  transform: rotate(100deg);
}
#div5 .content {
    transform: rotate(-100deg);
  }

#div6
{  
  transform: rotate(125deg);
}
#div6 .content {
    transform: rotate(-125deg);
  }

  #div7
{  
  transform: rotate(150deg);
}
#div7 .content {
    transform: rotate(-150deg);
  }
  #div8
{  
  transform: rotate(175deg);
}
#div8 .content {
    transform: rotate(-175deg);
  }
  #div9
{  
  transform: rotate(200deg);
}
#div9 .content {
    transform: rotate(-200deg);
  }
  #div10
{  
  transform: rotate(225deg);
}
#div10 .content {
    transform: rotate(-225deg);
  }
  #div11
{  
  transform: rotate(250deg);
}
#div11 .content {
    transform: rotate(-250deg);
  }
.item{
    width:var(--itemWidth);
    height:30px;
    position: absolute;
    left:calc(50% - var(--itenWidthHalf));
    transform-origin: var(--itenWidthHalf) var(--hheight);
}
.content{
    background-color: rgba(0, 0, 0, .5);
    text-align: center;
    color:#fff;
    width:100%;
    height:100%;
    transition: transform 1s
}
</style>
</head>

<body id="target">
    <button id='rotateButton'>旋转</button>
    <button id='rotateButton2'>反旋转</button>
    <div id="circle-area2"></div>
    <div id="circle-area3"></div>
<div id="circle-area">
  <div class="item" id="div1">
      <div class='content' id='item-1'>
          <div>
              <img src='https://exp-new.bdstatic.com/static/exp-pc/common-jquery/widget/search-box/img/logo_6115f97.png' width="100px">
            <div>
                数字法理生态1
            </div>
            <br/>
            <button>进入</button>
          </div>
      </div>
    </div>
  <div class="item" id="div2">
    <div class='content' id='item-2'>数字国际领域合作2</div>
  </div>
  <div class="item" id="div3">
    <div class='content' id='item-3'>数字国际领域合作3</div>
  </div>
  <div class="item" id="div4">
    <div class='content' id='item-4'>数字国际领域合作4</div>
  </div>
  <!-- <div id="div4"></div> -->
  <div class="item" id="div5">
    <div class='content' id='item-5'>数字国际领域合作5</div>
  </div>
  <div class="item" id="div6">
    <div class='content' id='item-6'>数字国际领域合作6</div>
  </div>
  <div class="item" id="div7">
    <div class='content' id='item-7'>数字国际领域合作7</div>
  </div>
  <div class="item" id="div8">
    <div class='content' id='item-8'>数字国际领域合作8</div>
  </div>
  <div class="item" id="div9">
    <div class='content' id='item-9'>数字国际领域合作9</div>
  </div>
  <div class="item" id="div10">
    <div class='content' id='item-10'>数字国际领域合作10</div>
  </div>
  <div class="item" id="div11">
    <div class='content' id='item-11'>数字国际领域合作11</div>
  </div>
</div>
  
<script src="./touch.js"></script>
<script>
let current=0;
  let count = 0
  const btn = document.getElementById('rotateButton')
  const btn2 = document.getElementById('rotateButton2')
  const circle = document.getElementById('circle-area')
  let hasRotate=0
touch.on('#target', 'touchstart', function(ev){
    ev.preventDefault();
    }
);
let swiperVitor="left"
var target = document.getElementById("target");
touch.on(target, 'swipestart', function(ev){
    console.log("swipestart."); 
    // swiperVitor="left"
});
touch.on(target, 'swiping', function(ev){
    // console.log("Math.abs(ev.distanceX)*45/document.body.offsetWidth",Math.abs(ev.distanceX)*45/document.body.offsetWidth);
    // if(Math.abs(ev.distanceX)*45/document.body.offsetWidth>25){
    //     return
    // }
    // circle.style.transitionDuration = "0ms",
    // circle.style.transform = 'rotate('+(count+ev.distanceX*45/document.body.offsetWidth)+'deg)'
    // hasRotate=ev.distanceX*45/document.body.offsetWidth
    // document.querySelectorAll(".content")[1].style.transitionDuration = "0ms",
    // document.querySelectorAll(".content")[1].style.transform = 'rotate('+(-25-ev.distanceX*45/document.body.offsetWidth)+'deg)'
    // for(let i=1;i<=11;i++){
    //     document.querySelectorAll(".content")[i-1].style.transitionDuration = "0ms",
    //     document.querySelectorAll(".content")[i-1].style.transform = 'rotate('+(-25*(i-1)-ev.distanceX*45/document.body.offsetWidth)+'deg)'
    // }
    // swiperVitor="left"
});
touch.on(target, 'swipeend', function(ev){
    console.log("swipeend."); 
    // swiperVitor="left"
});
touch.on(target, 'swiperight', function(ev){
    // this.style.webkitTransform = "translate3d(" + rt + "px,0,0)"; 
    console.log("向右滑动.");
    swiperVitor="right"
});
touch.on(target, 'swipeleft', function(ev){
    console.log("向左滑动."); 
    swiperVitor="left"
});
touch.on(target, 'dragend', function(ev){
    console.log("结束.",swiperVitor=="left",swiperVitor=="right"); 
    if(swiperVitor=="left"){
        
        swiperRight()
    }
    if(swiperVitor=="right"){
        swiperLeft()
    }
});


  btn.addEventListener('click',swiperLeft)
  function swiperLeft(){
      console.log('swiperLeft',current)
    if(current==0){
          return
      }
    current--
    count = count + 25
    circle.style.transitionDuration = "1s",
    circle.style.transform = 'rotate('+count+'deg)'
    for(let i=1;i<=11;i++){
        document.querySelectorAll(".content")[i-1].style.transitionDuration = "1s",
        document.querySelectorAll(".content")[i-1].style.transform = 'rotate('+(-count-25*(i-1))+'deg)'
    }
  }
  btn2.addEventListener('click',swiperRight)
  function swiperRight(){
    if(current==10){
          return
      }
    current++
    count = count - 25
    circle.style.transitionDuration = "1s",
    circle.style.transform = 'rotate('+count+'deg)'
    for(let i=1;i<=11;i++){
        document.querySelectorAll(".content")[i-1].style.transitionDuration = "1s",
        document.querySelectorAll(".content")[i-1].style.transform = 'rotate('+(-count-25*(i-1))+'deg)'
    }
  }
</script>
</body>
</html>